<!-- chose-alert -->
<template>
  <div class="chose-alert">
    <div class="chose-alert-shade" @click="$emit('closeShade')" :style="{'z-index': z_index}"></div>
    <div class="chose-alert-container">
      <h6 class="chose-alert-title" v-if="type===1">您确认提交当前业务到下一个环节吗？</h6>
      <h6 class="chose-alert-title" v-if="type===0 && info.passOrRejectType !== 'transfer' && info.passOrRejectType !== 'reject'">您确认审核当前业务到下一个环节吗？</h6>
      <h6 class="chose-alert-title" v-if="info.passOrRejectType === 'reject'">您确认驳回当前业务到下一个环节吗？</h6>
      <h6 class="chose-alert-title" v-if="info.passOrRejectType === 'transfer'">选择移交人员？</h6>
      <textarea v-if="type===0 && info.passOrRejectType !== 'transfer'" class="suggestion" v-model="text_value" placeholder="意见建议"></textarea>
      <div class="chose-alert-roll-out common-chose" v-if="info.passOrRejectType !== 'transfer'">
        <span>业务转出到:</span>
        <span class="chose-btn" @click="showPicker('showNext')">{{roll_out}}</span>
      </div>
      <div class="chose-alert-appoint common-chose" v-if="info.passOrRejectType !== 'reject'" v-show="!end">
        <span>指定经办人:</span>
        <span class="chose-btn" @click="showPicker('showTrans')">{{appoint_people}}</span>
      </div>
      <div class="submit-btn" @click="submitFunc(1)" v-if="type===1">确定提交审批</div>
      <div class="btn-container-column" v-else-if="type===0">
        <button v-if="info.passOrRejectType === 'reject'" class="btn" @click="submitFunc(0)">驳回</button>
        <button v-if="info.passOrRejectType === 'pass'" class="btn" @click="submitFunc(2)">审核</button>
        <button v-if="info.passOrRejectType === 'transfer'" class="btn" @click="submitFunc(3)">移交</button>
      </div>
    </div>
    <!-- 业务转出 -->
    <div v-if="showNext" class="chose-alert-shade" @click.self="showNext = false" :style="{'z-index': z_index+1}">
        <mt-picker  :slots="NextActDefListSlots" 
        :showToolbar="true" class="picker-alert" value-key="ActDef_Name" @change="onValuesChange"
        className="picker" textAlign="center">
          <mt-button size="small" type="default" @click="showNext = false">取消</mt-button>
          <mt-button size="small" type="default" @click="confirmPicker('showNext')">确认</mt-button>
        </mt-picker>
    </div>
    <!-- 指定经办人 -->
    <div v-if="showTrans" class="chose-alert-shade" @click.self="showTrans = false" :style="{'z-index': z_index+1}">
      <mt-picker :slots="TransferUserListSlots" :showToolbar="true" class="picker-alert" @change="onValuesChange" value-key="USER_NAME" className="picker" textAlign="center">
        <mt-button size="small" type="default" @click="showTrans = false">取消</mt-button>
        <mt-button size="small" type="default" @click="confirmPicker('showTrans')">确认</mt-button>
      </mt-picker>
    </div>
  </div>
</template>

<script>
import {Picker} from "mint-ui";
export default {
  name: 'choseAlert',

  data () {
    return {
      text_value: '', // 意见建议
      z_index: 5, // 遮罩层展示
      roll_out: '请选择', // 展示 （业务转出）
      next_slot_value: {}, // picker 选中的value值 (业务转出)
      next_confirm_value: {}, // picker 确定选中的值(业务转出)
      showNext:false, // 业务转出picker 显示隐藏 false 隐藏
      NextActDefListSlots:[{
        values:[
          // {
          //   ActDef_ID: "1381",
          //   ActDef_Name: "申请部门意见",
          //   ActDef_Type: "2010",
          //   ProDef_ID: "391"
          // }
        ]
      }],
      showTrans:false, // 指定经办人picker 显示隐藏 false 隐藏
      appoint_people: '请选择', // 展示（经办人）
      trans_slot_value: {}, // picker 选中的value值(经办人)
      trans_confirm_value: {}, // picker 确定选中的值(经办人)
      TransferUserListSlots:[{
        values:[
          // {
          //   USER_ID: 123,
          //   USER_NAME: '这个领导'
          // }
        ]
      }],
      NEXTACTDEF_IDS: '', // 流程内码
      end:false //ActDef_Type=5010 审核流程结束
    }
  },
  props: {
    'info': Object,
    'type': {
      default: () => 0
    }
  },
  watch: {
    showNext (after, before) {
      this.z_index = after === true ? 2000 : 5
      if(after){
        document.getElementsByTagName("body")[0].style.position = "fixed"
        document.getElementsByTagName("body")[0].style.overflow = "hidden"
      }
      if(before){
        document.getElementsByTagName("body")[0].style.position = "static"
        document.getElementsByTagName("body")[0].style.overflow="auto"
      }
    },
    showTrans (after, before) {
      this.z_index = after === true ? 2000 : 5
      if(after){
        document.getElementsByTagName("body")[0].style.position = "fixed"
        document.getElementsByTagName("body")[0].style.overflow = "hidden"
      }
      if(before){
        document.getElementsByTagName("body")[0].style.position = "static"
        document.getElementsByTagName("body")[0].style.overflow="auto"
      }
    }
  },
  components: {
  },

  computed: {},

  methods: {
    submitFunc (type) {
      this.$emit('submitForm',{
        type, // 类型 type 0 为驳回 2为同意  1为提交审批 3移交
        sug: this.text_value, // 意见建议
        next: this.next_confirm_value, // 业务转出
        trans: this.trans_confirm_value // 经办人
      })
    },
    // 选中picker
    confirmPicker (type) {
      if (type === 'showNext') {
        this.showNext = false
        this.next_confirm_value = this.next_slot_value
        this.GetTransferUser(this.next_confirm_value.ActDef_ID)
        this.roll_out = this.next_confirm_value.ActDef_Name
      } else if (this.TransferUserListSlots[0].values.length > 0) {
        this.showTrans = false
        this.trans_confirm_value = this.trans_slot_value
        this.appoint_people = this.trans_confirm_value.USER_NAME
      }
    },
    // 显示picker
    showPicker (type) {
      if (type === 'showNext' && !this.showNext) {
        this.showNext = true
      }
      if (type === 'showTrans' && !this.showTrans) {
        this.showTrans = true
      }
    },
    // 获取选中的值
    onValuesChange (picker, values) {
      if (this.showNext) { // 业务转出
        this.next_slot_value = values[0]
      } else { // 经办人
        this.trans_slot_value = values[0]
      }
    },
    // 获取下一环节流程
    getNextActDef (FINANCEPROINST_ID, OPERATION_TYPE) {
      if(this.info.passOrRejectType === 'reject'){
        this.$api.post(this.$apiPath.baseURL, this.$apiPath.url,{
          action_type: 'GetReturnActDef',
          FINANCEPROINST_ID // 业务内码
        })
          .then(response => {
            this.NextActDefListSlots[0].values = response.data.NextActDefList
          })
      }else{
        this.$api.post(this.$apiPath.baseURL, this.$apiPath.url,{
            action_type: 'GetNextActDef',
            FINANCEPROINST_ID, // 业务内码
            OPERATION_TYPE// 业务类型
        })
         .then(response => {
            if(response.data.NextActDefList[0].ActDef_Type === '5010'){ this.end = true}
            this.text_value = '拟同意' 
            this.NextActDefListSlots[0].values = response.data.NextActDefList
         })
      }
    },
    // 获取转出人员信息
    GetTransferUser (NextACTDEF_IDS,type) {
        this.$api.post(this.$apiPath.baseURL, this.$apiPath.url,{
            action_type: 'GetTransferUser',
            NextACTDEF_IDS:NextACTDEF_IDS ,// 流程内码
            TransferType: type || ''
        })
         .then(response => {
           if(this.info.passOrRejectType === 'transfer'){
             response.data.TransferUserList.forEach((el,i) => {
               if(el.USER_ID.toString() !== this.info.USER_ID.toString()) {
                 this.TransferUserListSlots[0].values.push(el)
               }
             });
           }else {
             this.TransferUserListSlots[0].values = response.data.TransferUserList
           }
           
         })
    }
  },
  created () {
    if (this.info.FINANCEPROINST_ID !== undefined && this.info.OPERATION_TYPE !== undefined) {
       this.getNextActDef(this.info.FINANCEPROINST_ID, this.info.OPERATION_TYPE)
    }
    if(this.info.passOrRejectType === 'transfer'){
      this.GetTransferUser(this.info.NOWACTDEF_IDS,1)
    }
  },
  // watch:{
  //   showNext:function(newState,oldState){
  //     console.log(newState,oldState)
  //   }
  // },
  mounted () {}
}
</script>
<style lang="stylus" scoped>
$rem = 2.5
.chose-alert
  margin-top 0.5rem * $rem
  width 90%
  .chose-alert-shade
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    background-color rgba(0,0,0,0.5)
  .chose-alert-container
    position relative
    display flex
    flex-flow column nowrap
    justify-content space-between
    z-index 9
    padding 0.4rem * $rem
    background-color #ffffff
    border-radius 0.1rem * $rem
    .suggestion
      margin-top 0.3rem * $rem
      border 1px solid #dddddd
      height 2.5rem * $rem
      border-radius 0.1rem * $rem
      padding 0.2rem * $rem
      outline none
      resize none
    .submit-btn
      width 90%
      background-color #4c4b59
      text-align center
      height 0.8rem * $rem
      line-height 0.8rem * $rem
      color #ffffff
      font-size 0.28rem * $rem
      align-self center
      border-radius 0.1rem * $rem
      margin-top 0.3rem * $rem
    .common-chose
      display flex
      flex-flow row nowrap
      justify-content flex-start
      padding-top 0.3rem * $rem
      font-size 0.28rem * $rem
      align-items center
      .chose-btn
        flex 1
        text-align center
        background #e3e3e3
        padding 5px 0
        margin 0 10px
        border-radius 8px
    .btn-container-column
      display flex
      flex-flow row nowrap
      justify-content flex-start
      align-items center
      user-select none
      .btn
        flex 1
        margin 0.4rem * $rem auto
        height 0.8rem * $rem
        line-height 0.8rem * $rem
        text-align center
        background-color #4c4b59
        border none
        border-right 1px solid #ffffff
        color #ffffff
        outline none
        transition opacity 0.1s ease-in-out
        &:active
          opacity 0.7
        &:last-child
          border none
</style>
